<script setup lang="ts">
const { logout } = useDailog();
const { auth } = useAuth();
const { msg } = useStatus();
const handleLogout = () => {
  auth.value = null;
  msg.value = "注销成功";
  logout.value = false;
  return navigateTo("/");
};
</script>

<template>
  <FrontendHeader class="bg-white/50 shadow" />
  <div
    class="container mx-auto flex flex-col-reverse justify-start items-start my-3 p-3 gap-y-4 lg:flex-row lg:gap-x-4 lg:gap-y-0 lg:my-6"
  >
    <aside
      class="bg-white rounded-md overflow-hidden border w-full shadow lg:shrink-0 lg:w-auto"
    >
      <ul class="flex flex-col gap-y-3 text-lg">
        <li>
          <NuxtLink
            active-class="bg-cyan-500 text-white hover:text-gray-100"
            class="flex justify-start items-center gap-x-2 w-full px-8 py-3 hover:text-cyan-600"
            to="/user"
          >
            <div>
              <Icon
                name="lucide:mouse-pointer-click"
                class="w-[2rem] h-[2rem] rounded-full overflow-hidden p-1.5 border shadow"
              />
            </div>
            <div>网址列表</div></NuxtLink
          >
        </li>
        <li>
          <NuxtLink
            active-class="bg-cyan-500 text-white hover:text-gray-100"
            class="flex justify-start items-center gap-x-2 w-full px-8 py-3 hover:text-cyan-600"
            to="/user/profile"
          >
            <div>
              <Icon
                name="lucide:user-round"
                class="w-[2rem] h-[2rem] rounded-full overflow-hidden p-1.5 border shadow"
              />
            </div>
            <div>账号信息</div>
          </NuxtLink>
        </li>
        <li>
          <button
            active-class="bg-cyan-500 text-white hover:text-gray-100"
            class="flex justify-start items-center gap-x-2 w-full px-8 py-3 hover:text-cyan-600"
            @click="logout = true"
          >
            <div>
              <Icon
                name="lucide:circle-arrow-out-up-right"
                class="w-[2rem] h-[2rem] rounded-full overflow-hidden p-1.5 border shadow"
              />
            </div>
            <div>安全退出</div>
          </button>
        </li>
      </ul>
    </aside>
    <main class="w-full p-3 bg-white rounded-md shadow lg:grow lg:w-auto">
      <slot></slot>
    </main>
  </div>

  <FrontendUserLogout
    v-if="logout"
    @cancel="logout = false"
    @ok="handleLogout"
  />
</template>
